import { Tag } from 'ant-design-vue';
import type { TableColumn } from '@/components/core/dynamic-table';

export type TableListItem = API.MenuListResultItem;
export type TableColumnItem = TableColumn<TableListItem>;

/**
 * 将对应菜单类型转为字符串字意
 */
const getMenuType = (type) => {
  switch (type) {
    case 'M':
      return '目录';
    case 'C':
      return '菜单';
    // case 2:
    //   return '权限';
    default:
      return 'C';
  }
};

export const baseColumns: TableColumnItem[] = [
  {
    title: '菜单名称',
    dataIndex: 'menuName',
    width: 160,
  },
  {
    title: '图标',
    width: 100,
    dataIndex: 'icon',
    hideInSearch: true,
    align: 'center',
    customRender: ({ record }) => record.icon && <svg-icon name={record.icon} size="18" />,
  },
  {
    title: '排序',
    width: 60,
    align: 'center',
    hideInSearch: true,
    dataIndex: 'orderNum',
  },
  {
    title: '类型',
    width: 80,
    align: 'center',
    dataIndex: 'type',
    hideInSearch: true,
    customRender: ({ record }) => getMenuType(record.menuType),
  },
  {
    title: '路由地址',
    dataIndex: 'path',
    hideInSearch: true,
    align: 'center',
  },
  // {
  //   title: '路由缓存',
  //   dataIndex: 'keepalive',
  //   align: 'center',
  //   width: 80,
  //   customRender: ({ record }) => record.type === 1 && (record.keepalive ? '是' : '否'),
  // },
  {
    title: '组件路径',
    align: 'center',
    hideInSearch: true,
    dataIndex: 'component',
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => (
      <Tag color={record.status == '1' ? 'blue' : 'red'}>
        {record.status == '1' ? '正常' : '停用'}
      </Tag>
    ),
    formItemProps: {
      component: 'Select',
      componentProps: () => ({
        options: [
          {
            label: '正常',
            value: '1',
          },
          {
            label: '停用',
            value: '0',
          },
        ],
      }),
    },
  },
  // {
  //   title: '权限',
  //   width: 300,
  //   align: 'center',
  //   dataIndex: 'perms',
  //   customRender: ({ record }) =>
  //     record.type == 2 && (
  //       <div>
  //         {record.perms?.split(',').map((i) => (
  //           <Tag color="blue" key={i}>
  //             {i}
  //           </Tag>
  //         ))}
  //       </div>
  //     ),
  // },
  {
    title: '创建时间',
    width: 180,
    hideInSearch: true,
    align: 'center',
    dataIndex: 'createTime',
  },
];
